<div class="auth-main">
    <div class="auth-block">
        <h1>CrowdSourcing</h1>
        <h3>Reset Your Password</h3>
        <form [formGroup]="form" (ngSubmit)="onSubmit(form.value)" class="form-horizontal">
            <div formGroupName="passwords">
                <div class="form-group row" [ngClass]="{'has-error': (!form.get('passwords').get('password').valid && form.get('passwords').get('password').touched), 'has-success': (form.get('passwords').get('password').valid && form.get('passwords').get('password').touched)}">
                    <label for="inputPassword3" class="col-sm-2 control-label custom-width-10">
                    <i class="fa fa-key fa-2x"
                       style="color: #000;padding-left: 15px;position: relative;top: 5px;"></i>
                </label>

                    <div class="col-sm-10">
                        <input formControlName="password" type="password" class="form-control" id="inputPassword3" placeholder="Password">
                    </div>
                </div>
                <div class="form-group row" [ngClass]="{'has-error': (!form.get('passwords').get('repeatPassword').valid && form.get('passwords').get('repeatPassword').touched), 'has-success': (form.get('passwords').get('repeatPassword').valid && form.get('passwords').get('repeatPassword').touched)}">
                    <label for="inputPassword4" class="col-sm-2 control-label custom-width-10"><i
                                                                                              class="fa fa-key fa-2x"
                                                                                              style="color: #000;padding-left: 15px;position: relative;top: 5px;"></i></label>

                    <div class="col-sm-10">
                        <input formControlName="repeatPassword" type="password" class="form-control" id="inputPassword4" placeholder="Repeat Password">
                        <span *ngIf="!form.get('passwords').valid && (form.get('passwords').get('password').touched || form.get('passwords').get('repeatPassword').touched)" class="help-block sub-little-text">Passwords don't match.</span>
                    </div>
                </div>
            </div>

            <div class="form-group row">
                <div class="col-sm-offset-2 col-sm-10 custom-offset-10">
                    <button [disabled]="!form.valid || submitted" type="submit" class="btn btn-default btn-auth lgn">
                        Submit
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>